<template>
    <div>
        <ListInfo
        v-for="item in listData"
        :key="item.id"
        :id="item.id"
        @changeCheck="getCheck"
        :checked="item.checked"
        :title="item.title" :time="item.niceDate" :author="item.author">
            <template v-slot:right>
                <div class="listRight">
                    more...
                </div>
            </template>
            <template v-slot:kind>
                <div class="list-kind">分类：{{item.chapterName}} / {{item.superChapterName}}</div>
            </template>
            <template v-slot:tags>
                <div class="list-tags">
                    <span v-for="(val,idx) in item.tags" :key="idx" @click="location.href='http://www.baidu.com'">{{val.name}}</span>
                </div>
            </template>
        </ListInfo>
        <p v-if="isBottom">正在加载...</p>
        <p v-if="isEnd">没有数据了，加载完成</p>
    </div>
</template>

<script>
import ListInfo from "@/components/ListInfo.vue"
import { getHotDetail, getCollect } from "@/api"
import mixin from "@/mixin"
export default {
    mixins: [mixin],
    components:{
        ListInfo
    },
    data(){
        return {
            listData:[],
            collectData:[],
            isBottom: false,
            isEnd: false,
            index: 0
        }
    },
    created() {
        console.log(1);
        // getHotDetail(this.$route.params.id, this.index).then(res=>{
        //     // console.log(res.data.data.datas);
        //     this.listData = res.data.data.datas
        // })
        const p1 = getHotDetail(this.$route.params.id, this.index);
        const p2 = getCollect();
        Promise.all([p1,p2]).then(res=>{
            this.listData = res[0].data.data.datas;
            this.collectData = res[1].data.data.datas;
            for(let i=0;i<this.listData.length;i++){
                for(let j=0;j<this.collectData.length;j++){
                    if(this.listData[i].id === this.collectData[j].originId){
                        this.listData[i].checked = true;
                    }
                }
            }
        })
    },
    beforeRouteUpdate(to, from, next){
        // 切换路由时，由于组件被复用，没有重新渲染，所有需要手动将不同路由之间的数据初始化
        this.index = 0;
        this.isEnd = false;
        this.isBottom = false;
        document.onscroll = this.scroll;
        
        // getHotDetail(to.params.id, this.index).then(res=>{
        //     // console.log(res.data.data.datas);
        //     this.listData = res.data.data.datas
        // })
        const p1 = getHotDetail(to.params.id, this.index);
        const p2 = getCollect();
        Promise.all([p1,p2]).then(res=>{
            this.listData = res[0].data.data.datas;
            this.collectData = res[1].data.data.datas;
            for(let i=0;i<this.listData.length;i++){
                for(let j=0;j<this.collectData.length;j++){
                    if(this.listData[i].id === this.collectData[j].originId){
                        this.listData[i].checked = true;
                    }
                }
            }
        })

        next();
    },
    mounted() {
        // 1. 组件挂载成功后，给页面绑定滚动事件
        document.onscroll = this.scroll;
    },
    methods: {
        scroll(){
            // 2. 获取滚走了的距离
            const st = document.documentElement.scrollTop;
            // 2. 获取页面的可视高度
            const ch = document.documentElement.clientHeight;
            // 2. 获取页面的总高度（含可滚动的尺寸）
            const sh = document.documentElement.scrollHeight;
            // console.log(sh, st, ch);
            // 3. 当页面的总高度小于了滚走的距离加上可视高度加过渡距离
            if(sh < st + ch + 100){
                // 4. 到底了，修改状态
                this.isBottom = true;
                // 5. 加载数据
                this.load();
                // 6. 放置到底之后，重复触发
                document.onscroll = null;
            }
        },
        load(){
            this.index++;
            // 7. 异步加载数据
            getHotDetail(this.$route.params.id, this.index).then(res=>{
                // 8. 加载成功，修改状态
                this.isBottom = false;
                // 处理数据
                this.listData = this.listData.concat(res.data.data.datas);
                // 9. 判断数据是否已经全部加载
                if(res.data.data.datas.length < 1){
                    // 10. 修改加载结束状态
                    this.isEnd = true;
                    // 11. 清除事件
                    document.onscroll = null;
                }
            })
        }
    },
    watch:{
        isBottom(val){
            // 12. 加载完成后，新数据渲染到页面后，再次滚动到底部的加载
            if(!val && !this.isEnd){
                document.onscroll = this.scroll;
            }
        }
    }
}
</script>